// JS 的作用域
//      => 全局 ：在JS文件中的直接定义的代码均属于全局作用域代码；浏览器环境下全局作用域对象是 window
//               全局定义的方法或者变量 均存在与window对象中(let const不是)
//      => 局部 ：js方法体中的区域定义的代码均属于当前放啊的局部作用域，这些变量或方法只能在当前方法内使用


// HTML 标签的事件绑定 分为两种绑定规则
//         1. 静态事件绑定(html标签绑定事件) : 以 on事件名=执行方法 方式完成的事件绑定
//                  => 静态事件是属性赋值模式，一个事件只能存在一个执行方法
//         2. 动态事件绑定(JS dom事件绑定)  : 以DOM对象的事件方法 addEventListener 方式完成的事件绑定
//                  => 动态事件是参数赋值模式，一个事件可以定义多个执行方法

// 1. 静态事件绑定 => 同元素的多次静态事件赋值会按照代码定义顺序覆盖
//     + html标签属性定义模式 => 事件对于的绑定方法必须是全局方法
function clickFunA(){
    console.log("html onclick 事件绑定")
}
window.onload = function (){
//      + JS DOM 对象的 静态事件属性赋值 => 事件绑定只能在页面载入完成后定义
    let btn2 = document.querySelector("#btn2");
    btn2.onclick = function (){
        console.log("JS dom onclick 静态事件赋值-1")
    }
    btn2.onclick = function (){
        console.log("JS dom onclick 静态事件赋值-2")
    }

// 2.动态事件绑定 => 事件绑定只能在页面载入完成后定义
//              => 动态事件可以同时为同一个元素的同一个事件绑定多个执行方法
//                 方法执行顺序取决于代码定义顺序
    let btn3 = document.querySelector("#btn3");
    // btn3.addEventListener(eventName,callback)
    //      + eventName 事件名
    //      + callback 事件执行方法
    btn3.addEventListener("click",function (){
        console.log("js dom addEventListener 的click 事件 -1")
    })
    btn3.addEventListener("click",function (){
        console.log("js dom addEventListener 的click 事件 -2")
    })
}